<template>
  <div>
    <van-search placeholder="请输入搜索关键词" />
    <van-swipe :height="200" :autoplay="3000" indicator-color="white">
      <van-swipe-item :key="index" v-for="(image, index) in images">
        <img width="100%" :src="image" />
      </van-swipe-item>
    </van-swipe>

    <van-grid :column-num="3">
      <van-grid-item
        icon="//gw.alicdn.com/tfs/TB1wSoFa5qAXuNjy1XdXXaYcVXa-196-196.png?avatar=1_110x10000.jpg_.webp"
        text="妖猫超市"
      ></van-grid-item>
      <van-grid-item
        icon="//gw.alicdn.com/tfs/TB1Jc0fSFXXXXXTapXXXXXXXXXX-146-147.png_110x10000.jpg_.webp"
        text="妖猫国际"
      ></van-grid-item>
      <van-grid-item
        icon="//gw.alicdn.com/tfs/TB12CFXSFXXXXcpapXXXXXXXXXX-146-147.png_110x10000.jpg_.webp"
        text="分类"
      ></van-grid-item>
    </van-grid>

    <van-divider>为您推荐</van-divider>
    <van-grid :gutter="10" :column-num="2">
      <van-grid-item :key="index" v-for="(item,index) in recommendList" @click="toGoods(item.id)">
        <van-image :src="item.imgUrl" />
        <span class="title">{{item.title}}</span>

        <span
          style="white-space: pre-wrap; border: 0px solid black; position: relative; box-sizing: border-box; display: block; -webkit-box-orient: vertical; flex-direction: column; align-content: flex-start; flex-shrink: 0; font-size: 17.664px; text-align: left; font-weight: 600; color: rgb(255, 0, 0); line-height: 30.912px; margin-left: 11.04px;"
        >￥{{formatPrice(item.price)}}</span>
      </van-grid-item>
    </van-grid>

    <van-divider>数据已加载完</van-divider>
    <div style="height:50px"></div>
  </div>
</template>

<script>
import {
  Search,
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  Divider,
  Image,
  Button
} from "vant";

import { apiRecommendList } from "@/api/product";

export default {
  name: "Home",
  components: {
    [Search.name]: Search,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Divider.name]: Divider,
    [Image.name]: Image,
    [Button.name]: Button
  },
  data() {
    return {
      images: [
        "//img.alicdn.com/imgextra/i2/2200643589440/O1CN015Tt8bN2JbZNJey2o6_!!2200643589440.jpg_2200x2200Q50s50.jpg_.webp",
        "///img.alicdn.com/imgextra/i2/2200643589440/O1CN01UbmEor2JbZNKdkzYy_!!2200643589440.jpg_2200x2200Q50s50.jpg_.webp"
      ],
      recommendList: []
    };
  },
  created() {
    apiRecommendList().then(res => {
      this.recommendList = res;
    });
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    loadMore() {},
    handleScroll() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight == scrollHeight) {
        //请求数据接口  console.log("加载数据");
        //this.loadMore();
        return false;
      }
    },
    formatPrice(price) {
      return (price / 100).toFixed(2);
    },
    toGoods(id) {
      this.$router.push({
        name: "goods",
        query: {
          id: id
        }
      });
    }
  },
  computed: {}
};
</script>

<style lang="less">
.title {
  white-space: pre-wrap;
  border: 0px solid black;
  position: relative;
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  flex-direction: column;
  align-content: flex-start;
  flex-shrink: 0;
  font-size: 15.456px;
  text-align: left;
  line-height: 19.872px;
  height: 39.744px;
  margin-top: 2.208px;
  margin-bottom: 2.208px;
  color: rgb(62, 62, 62);
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>
